<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小U商城移动端--首页</title>
    <!-- 引入首页样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入阿里巴巴矢量图标 -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2966959_47fwewtflwi.css">
    <!-- 引入移动端js -->
    <script src="./js/remscale.js"></script>
</head>

<body>
    <!-- 最大的没啥用的最大盒子 -->
    <div id="wrap">
        <!-- 包裹头部的盒子 -->
        <div id="header">
            <!-- logo和商标的设置 -->
            <div class="logo">
                <i class="iconfont icon-position"></i>
                <img src="./img/images/白色的logo.png" alt="">
                <input type="text" class="iconfont" placeholder="&#xe6e4;&nbsp;按内容搜索">
                <i class="iconfont icon-dianpu-xianxing"></i>
            </div>
            <!-- 导航栏 -->
            <div class="top-nav">
                <!-- 左边的内容 -->
                <ul>
                    <li>
                        <a href="JavaScript:;" class="active">推荐</a>
                    </li>
                    <li>
                        <a href="JavaScript:;">女装</a>
                    </li>
                    <li>
                        <a href="JavaScript:;">鞋包</a>
                    </li>
                    <li>
                        <a href="JavaScript:;">居家</a>
                    </li>
                    <li>
                        <a href="JavaScript:;">母婴</a>
                    </li>
                    <li>
                        <a href="JavaScript:;">美妆</a>
                    </li>
                </ul>
                <!-- 右侧的分类 -->
                <div class="nav-right">
                    <span class="iconfont icon-fenlei"></span>
                    <a href="JavaScript:;">分类</a>
                </div>
            </div>
        </div>

        <!-- 轮播图的设置 -->
        <div class="banner-box">
            <!-- 轮播图 -->
            <ul class="banner-items">
                <!-- <li>
                    <img src="https://img1.baidu.com/it/u=2241334221,3271234001&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
                </li>-->
            </ul>
            <!-- 小圆点 -->
            <p class="banner-dot">
                <!-- <span class="banner-active"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span> -->
            </p>
        </div>

        <!-- 显示秒杀等活动 -->
        <div class="seckill-box">
            <ul>
                <li>
                    <img src="./img/images/miaosha.png" alt="">
                    <p>限时秒杀</p>
                </li>
                <li>
                    <img src="./img/images/hot.png" alt="">
                    <p>畅销商品</p>
                </li>
                <li>
                    <img src="./img/images/dapai.png" alt="">
                    <p>品质大牌</p>
                </li>
                <li>
                    <img src="./img/images/ziying.png" alt="">
                    <p>小U自营</p>
                </li>
                <li>
                    <img src="./img/images/jifen.png" alt="">
                    <p>积分商城</p>
                </li>
            </ul>
        </div>

        <!-- 下面的商品的大盒子 -->
        <div id="shop-list">
            <!-- 包裹三张图片的盒子 -->
            <div class="imgs">
                <!-- 左边的盒子 -->
                <div class="left-box">
                    <!-- 标题 -->
                    <div class="title">
                        <p class="fl">限时秒杀
                        </p>
                        <a href="JavaScript:;" class="fr">查看更多&gt;</a>
                    </div>
                    <!-- 副标题 -->
                    <h4>每天0点场，好货秒不停</h4>
                    <!-- 倒计时 -->
                    <div class="time">
                        <span></span>&nbsp;:&nbsp;<span></span>&nbsp;:&nbsp;<span></span>&nbsp;:&nbsp;<span></span>
                    </div>
                </div>
                <!-- 右边的盒子 -->
                <div class="right-box">
                    <!-- 上面的盒子 -->
                    <div class="right-top">
                        <h2>品牌上新</h2>
                        <p>9点整，抢大牌</p>
                        <a href="JavaScript:;">疯狂抢包&gt;</a>
                    </div>
                    <!-- 下面的盒子 -->
                    <div class="right-bot">
                        <h2>日用好物</h2>
                        <p>愿君多采撷</p>
                        <a href="JavaScript:;">塞满奖券&gt;</a>
                    </div>
                </div>
            </div>

            <!-- 下面的大盒子 -->
            <div class="type">

                <!-- 双十一和畅想全球商品列表 -->
                <div class="list">
                    <!-- 标题 -->
                    <div class="list-title">
                        <p class="list-active">双十一尖货预购</p>
                        <p>畅想全球</p>
                    </div>
                    <!-- 双十一商品内容 -->
                    <div class="double-box">
                        <ul id="double-one">
                            <!-- <li>
                            <img src="./img/images/护肤.png">
                        </li> -->
                        </ul>
                    </div>
                    <!-- 畅想全球的内容 -->
                    <div class="total-box" style="display: none;">
                        <ul id="total">
                            <!-- <li>
                            <img src="./img/images/健步鞋.jpg">
                        </li> -->
                        </ul>
                    </div>
                </div>

                <!-- 热门推荐、上新推荐、所有商品的设置 -->
                <div class="all">
                    <!-- 标题 -->
                    <ul class="all-title">
                        <li class="all-active">热门推荐</li>
                        <li>上新推荐</li>
                        <li>所有商品</li>
                    </ul>

                    <!-- 热门推荐的内容 -->
                    <div class="hot">
                        <ul id="hot-box">
                            <!-- <li>
                                <img src="" alt="">
                                <div>
                                    <p>小米10</p>
                                    <h4>现价格：￥<span>3999</span></h4>
                                    <s>原价格：￥<i>4000</i></s>
                                    <a href="JavaScript:;">立即抢购</a>
                                </div>
                            </li> -->
                        </ul>
                    </div>
                    <!-- 上新推荐的内容 -->
                    <div class="fresh" style="display: none;">
                        <ul id="fresh-box">
                            <!-- <li>
                                <img src="" alt="">
                                <div>
                                    <p>小米10</p>
                                    <h4>现价格：￥<span>3999</span></h4>
                                    <s>原价格：￥<i>4000</i></s>
                                    <a href="JavaScript:;">立即抢购</a>
                                </div>
                            </li> -->
                        </ul>
                    </div>
                    <!-- 所有商品的内容 -->
                    <div class="entire" style="display: none;">
                        <ul id="entire-box">
                            <!-- <li>
                                <img src="" alt="">
                                <div>
                                    <p>小米10</p>
                                    <h4>现价格：￥<span>3999</span></h4>
                                    <s>原价格：￥<i>4000</i></s>
                                    <a href="JavaScript:;">立即抢购</a>
                                </div>
                            </li> -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 引入数据 -->
    <script src=" ./js/data.js "></script>
    <!-- 引入jquery -->
    <script src="./js/jquery-3.6.0.min.js "></script>
    <!-- 引入封装好的函数 -->
    <script src="./js/teacher.js "></script>
    <!-- 引入首页的js样式 -->
    <script src="./js/index.js "></script>
</body>

</html>